import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Input, InputNumber } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;
@connect(({ supplymanage }) => ({
  supplymanage,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {};

  componentDidMount() {}

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();

    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'supplymanage/handleSubmit',
          payload: {
            price: values.addPrice,
            rcrdSuppName: values.addName,
          },
        }).then(tempData => {
          if (tempData.success) {
            router.push('/filemanage/supplymanage/index');
          }
        });
      }
    });
  };

  render() {
    const formItemLayout = {
      labelCol: { md: { span: 8 } },
      wrapperCol: { md: { span: 10 } },
    };
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <div>
        <PageHeaderWrapper>
          <Card title="档案供应商-新建">
            <Form>
              <FormItem {...formItemLayout} label="供应商名称">
                {getFieldDecorator('addName', {
                  rules: [{ required: true, message: '请输入供应商名称' }],
                })(
                  <Input
                    placeholder="请输入供应商名称"
                    style={{ width: 200 }}
                    onChange={this.addNameChange}
                  />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="供应商价格">
                {getFieldDecorator('addPrice', {
                  rules: [{ required: true, message: '请输入供应商价格' }],
                })(<InputNumber min={1} max={1000} onChange={this.addPriceChange} />)}
              </FormItem>
            </Form>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()} type="primary">
              取消
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleSubmit}>
              提交
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default BasicList;
